<template>
  <div class="login-container">
    <div class="login-form">
      <div class="logo-wrapper">Amazon</div>
      <cube-input class="mt-2" v-model="username" type="text" placeholder="Username/Email">
        <div slot="prepend" class="prepend-icon">
          <i class="fa fa-user-circle"></i>
        </div>
      </cube-input>
      <cube-input class="mt-2" v-model="password" type="password" placeholder="Password" :eye="eye">
        <div slot="prepend" class="prepend-icon">
          <i class="fa fa-lock"></i>
        </div>
      </cube-input>
      <div class="forgot-password mt-2">
        forgot password
      </div>
      <cube-button class="mt-2" primary @click="onLogin">Log in</cube-button>
      <cube-button class="mt-2" outline @click="onRegister">Create Account</cube-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Login } from '@/api';
import Cookie from 'js-cookie';

@Component({
  components: {}
})
export default class LoginClass extends Vue {
  private username: string = "";
  private password: string = "";

  private eye = {
    open: true,
    reverse: false
  };
  protected mounted() {
    // this.testData()
  }

  private testData() {
    this.username = '4321'
    this.password = '123456'
  }

  private onLogin() {
    if (this.username === "") {
      return this.$createDialog({
        type: 'alert',
        title: 'Attention',
        content: 'Please enter your account!',
        icon: 'cubeic-alert',
        confirmBtn: {
          text: 'OK',
          active: true,
          disabled: false,
          href: 'javascript:;'
        },
      }).show();
    }
    if (this.password === "") {
      return this.$createDialog({
        type: 'alert',
        title: 'Attention',
        content: 'Please enter your password!',
        icon: 'cubeic-alert'
      }).show();
    }

    this.handleLogin();
  }

  private async handleLogin() {
    
    const params = {
      username: this.username,
      password: this.password,
      userType: 1,
    };

    const { data } = await Login.handleLogin.r(params);

    if (data.result === 0) {
      console.log('login', data);
      let $data = data.data;
      Cookie.set('buyer_token', $data.userVo.token);
      Cookie.set('buyer_userId', $data.userVo.userId.toString());
      Cookie.set('username', $data.userVo.username);

      this.$emit('login', {
        newPath: 'App/Home',
        $data,
      });
    } else {
      this.$createDialog({
        type: 'alert',
        title: 'Attention',
        content: data.message,
        icon: 'cubeic-alert',
        confirmBtn: {
          text: 'OK',
          active: true,
          disabled: false,
          href: 'javascript:;'
        },
      }).show();
    }
    
  }

  private onRegister() {
    this.$router.push({
      name: 'Register'
    });
  }
}
</script>

<style lang="less" scoped>
.login-container {
  display: flex;
  flex-direction: column;
  padding: 0 14%;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  justify-content: center;
  .logo-wrapper {
    height: 24%;
    flex-basis: 24%;
  }
  .login-form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 17rem;
  }
}

.cube-input {
  width: 100%!important;
}

.prepend-icon {
  padding-left: 8px;
}

.mt-2 {
  margin-top: 10px;
}
</style>
